<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="Reddy.Huang <i@0u0b.com>"/>
    <link rel="stylesheet" href="./assets/main.css">
    <title>In pieces</title>
</head>
<body class="preloader preloader-layer">
<div id="loader">
    <div class="loading-title">
        <h5>正在生成<span>碎片</span></h5>
        <p>In-pieces 30 species 30 pieces.</p>
    </div>
    <div class="loading-intro">
        <p>
            <span>30</span>
            <span>unique</span>
            <span>species</span>
            <span>face</span>
            <span>a fragmented</span>
            <span>survival.</span>
        </p>
        <p>
            <span>Represented</span>
            <span>here</span>
            <span>by</span>
            <span>30</span>
            <span>separate pieces</span>
            <span>...</span>
        </p>
        <p>
            <span>They</span>
            <span>share</span>
            <span>struggles,</span>
            <span>and</span>
            <span>unite</span>
            <span>together...</span>
        </p>
        <p>
            <span>in</span>
            <span>an</span>
            <span>interactive</span>
            <span>exhibition.</span>
        </p>
    </div>
    <div class="intro-content">
        <h1>In pieces</h1>
        <p class="textuered-type">
            30 species. 30 pieces.
            <span>1 fragmented survival.</span>
        </p>
        <p>
            一个
            <span>基于css clip-path属性</span>
            的濒危动物互动展览
        </p>
        <a href="javascript:;" id="start">
            <span>点击进入展览</span>
        </a>
    </div>
</div>
<section id="show-stage">
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper">
        <div class="pieces"></div>
    </div>
    <div class="wrapper extra">
        <div class="pieces"></div>
    </div>
    <div class="wrapper extra">
        <div class="pieces"></div>
    </div>
    <div class="wrapper extra">
        <div class="pieces"></div>
    </div>
    <div class="shadow"></div>
</section>
<div class="nav">
    <ul class="animal-nav">
        <li class="prev">
            <a href="javascript:;" class="nav-btn">
                <div class="arrow"></div>
                <div class="popout"></div>
            </a>
        </li>
        <li class="help">
            <a href="javascript:;" class="why">
                <span>了解更多</span>
            </a>
        </li>
        <li class="next">
            <a href="javascript:;" class="nav-btn">
                <div class="arrow"></div>
                <div class="popout"></div>
            </a>
        </li>
    </ul>
    <ul class="main-nav">
        <li>
            <a href="javascript:;" class="nav-btn" id="all-animals-btn">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="popout">所有碎片</div>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="nav-btn">
                <div class="arrow">
                    <div></div>
                </div>
                <div class="arrow">
                    <div></div>
                </div>
                <div class="popout">自动播放</div>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="nav-btn">
                <div class="mute">
                    <span></span>
                </div>
                <div class="popout">背景音控制</div>
            </a>
        </li>
        <a href="javascript:;" class="nav-btn all-animals-off-btn close">
            <div class="icon"></div>
            <div class="popout">返回</div>
        </a>
    </ul>
    <ul class="animal-info">
        <li class="textuered-type">
            Piece
            <span class="pieces-no">1</span>
        </li>
        <li>
            <h2 class="textuered-type" id="animal-name">Okapi</h2>
        </li>
        <li>
            <a href="javascript:;" class="direct-stats stats-pie">
                <span></span>
            </a>
            <a href="javascript:;" class="wallpaper">
                <span></span>
            </a>
        </li>
    </ul>
    <footer>
        <ul class="link">
            <li>
                <a href="javascript:;" class="line-link about">
                    关于这个项目
                </a>
            </li>
            <li>
                <a href="javascript:;" class="line-link how">
                    动效原理
                </a>
            </li>
            <li>
                <a href="javascript:;" class="line-link sources">
                    动机&链接
                </a>
            </li>
            <li>
                <a href="javascript:;" class="line-link share">
                    分享给朋友
                </a>
            </li>
            <li>
                <a href="http://www.bryanjamesdesign.co.uk" target="_blank" class="popout">
                    <span class="wee">A wee project </span>
                    by
                    <span class="bryan">Bryan James</span>
                </a>
            </li>
        </ul>
        <a href="javascript:;" class="footer-nav">
            <div></div>
        </a>
    </footer>
</div>
<div class="hover-detector inactive">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="animal-nav-content inactive">
    <div class="title-content">
        <h1>In Pieces</h1>
        <h2>
            30 Species
            <span>30 Pieces</span>
        </h2>
        <h4>1 Fragmented Survival</h4>
        <p>
            从圆环上选择一个物种，或
            <br>
            选择一个
            <a href="javascript:;" class="line-link red random-animal-btn">随机物种</a>
        </p>
    </div>
    <ul class="all-animals-title">
        <li class="">
            <h4>Piece 1</h4>
            <h2>Helmeted Hornbill</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 2</h4>
            <h2>Vaquita</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 3</h4>
            <h2>Golden Lion Tamarin</h2>
            <span>濒危</span>
        </li>
        <li class="">
            <h4>Piece 4</h4>
            <h2>Golden Poison Frog</h2>
            <span>濒危</span>
        </li>
        <li class="">
            <h4>Piece 5</h4>
            <h2>Forest Owlet</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 6</h4>
            <h2>Kemp’s Ridley Sea Turtle</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 7</h4>
            <h2>Scimitar Oryx</h2>
            <span>野外灭绝</span>
        </li>
        <li class="">
            <h4>Piece 8</h4>
            <h2>Fiji Crested Iguana</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 9</h4>
            <h2>Knysna Seahorse</h2>
            <span>濒危</span>
        </li>
        <li class="">
            <h4>Piece 10</h4>
            <h2>Brazilian Armadillo</h2>
            <span>脆弱</span>
        </li>
        <li class="">
            <h4>Piece 11</h4>
            <h2>Pygmy Three-toed Sloth</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 12</h4>
            <h2>Kakapo</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 13</h4>
            <h2>Long-beaked Echidna</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 14</h4>
            <h2>African Penguin</h2>
            <span>濒危 </span>
        </li>
        <li class="">
            <h4>Piece 15</h4>
            <h2>Greek Red Damsel</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 16</h4>
            <h2>Sun Bear</h2>
            <span>脆弱</span>
        </li>
        <li class="">
            <h4>Piece 17</h4>
            <h2>Rainbow Parrotfish</h2>
            <span>濒临危机 </span>
        </li>
        <li class="">
            <h4>Piece 18</h4>
            <h2>Bactrian Camel</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 19</h4>
            <h2>Wallace’s Birdwing</h2>
            <span>濒危</span>
        </li>
        <li class="">
            <h4>Piece 20</h4>
            <h2>Somali Ostrich</h2>
            <span>脆弱</span>
        </li>
        <li class="">
            <h4>Piece 21</h4>
            <h2>Red Panda</h2>
            <span>脆弱</span>
        </li>
        <li class="">
            <h4>Piece 22</h4>
            <h2>Malayan Tapir</h2>
            <span>濒危</span>
        </li>
        <li class="">
            <h4>Piece 23</h4>
            <h2>Diademed Sifaka</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 24</h4>
            <h2>Iberian Lynx</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 25</h4>
            <h2>Sumatran Rhino</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 26</h4>
            <h2>Chocoan Peccary</h2>
            <span>濒危</span>
        </li>
        <li class="">
            <h4>Piece 27</h4>
            <h2>Okapi</h2>
            <span>濒危</span>
        </li>
        <li class="">
            <h4>Piece 28</h4>
            <h2>Javan Slow Loris</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 29</h4>
            <h2>Hirola</h2>
            <span>极度濒危</span>
        </li>
        <li class="">
            <h4>Piece 30</h4>
            <h2>Drill</h2>
            <span>濒危</span>
        </li>
    </ul>
</div>
<div class="content-wrapper">
    <div class="content">
        <div class="content-info">
            <div class="infos">
                <a href="javascript:;" class="nav-btn close">
                    <div class="icon"></div>
                </a>
                <ul>
                    <li>
                        学名:
                        <span id="scientific-name">Loading...</span>
                    </li>
                    <li>I</li>
                    <li>
                        生存范围:
                        <span id="range">Loading...</span>
                    </li>
                </ul>
                <p class="why-info"></p>
                <p class="why-info"></p>
                <p class="why-info"></p>
            </div>
        </div>
    </div>
</div>
<div class="overlay">
    <a href="javascript:;" class="nav-btn close">
        <div class="icon"></div>
    </a>
    <div class="about">
        <h2>关于这个项目</h2>
        <p>In Pieces 是一个交互展览，它包含30种有趣但不幸濒临危机的物种，它们的生存现状正如动画所展示的，支离破碎。</p>
        <h2>As Featured On</h2>
        <img class="feature" src="assets/img/features/fwa.svg" alt="">
        <img class="feature" src="assets/img/features/awwwards.svg" alt="">
        <p>Each species has a common struggle and is represented by one of 30 pieces which come together to form one
            another. The collection is a celebration of <span>genic diversity</span> and an attempting reminder of the
            beauty we are on the verge of losing as every moment passes. These 30 animals have been chosen for their
            differences, so that we can learn about species we didn't know about previously as well as the struggles
            they have surviving. Many of them evolved in a particular way which makes them evolutionarily distinct.</p>
        <p>Take for example the Kakapo, an animal which evolved without natural predators and thus didn’t require
            instincts to defend itself. Unfortunately — and as is the case with most of the species showcased here —
            humans began easily hunting upon encroaching their range, then introduced the stoat and other forms of pest
            control for other species. The Kakapo was <span>almost completely wiped out</span> through this introduction
            and fights on today because of this catastrophic lack of judgement.</p>
        <p>When you dig into a lot of research around this topic, it’s not long before you see the real darkness that is
            going on. <span>Millions of years of evolution has occurred</span> and humans are in danger of ruining it
            through desperation for financial gain or greed.</p>
        <p>There are some species here who as grim as it sounds, would require a small miracle to survive because the
            numbers are too low to rationally continue to exist, Vaquita being one such example.</p>
        <p>In Pieces hopes to <span>educate and inspire, and provoke thought</span> on this complex and intricate topic.
            I sincerely hope that you can take something new away and enjoy this collection as much as I enjoyed
            researching, designing and building it.</p>
    </div>
    <div class="how">
        <h2>动效原理</h2>
        <p>一个简单属性的奇思妙想，在这里使用的核心技术都是CSS属性——没有用到CANVAS或者WEBGL</p>
        <p>自从听说<span>CSS多边形</span>以来，我对这种技术感到有点惊讶，所以我想设计一个东西，它不仅本身作为一个项目，而且要尽可能让这个属性使用的更广。</p>
        <p>这个CLIP-PATH属性仅能够在WEBKIT浏览器中使用，当然这是一个最大的限制，但同时他几乎能在<span>所有移动端</span>上使用。FIREFOX浏览器不支持CLIP-PATH属性，但是可以通过SVG引入，因为如此，要适配FIREFOX就是另一套不同的编码方式。所以我打算专注于CSS路线。
        </p>
        <p>没听说过它吗? 它就是这样的:
            <span><em><br>-webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );</em></span>
        </p>
        <p>So, in essence — each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they
            are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements.
            <span>No tricks or tools</span> have been used to get the illustrated results, code-wise or graphically.
            Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function
            after illustration.</p>
        <img src="assets/img/assets/polygon-demo.png" alt="Polygon demonstration">
        <p>If you have any questions on the technique or the project at all, please feel free to <a
                class="line-link  dark-line" target="_blank" href="https://twitter.com/WengersToyBus">whip me a
            Tweet!</a></p>
    </div>
    <div class="sources">
        <h2>动机&链接</h2>
        <p>In Pieces 和任何慈善机构或组织都没有关系，但我还是想列出一些正努力拯救濒临灭绝动物的组织机构</p>
        <p><a target="_blank" class="offsite offsite-dark line-link dark-line"
              href="http://www.edgeofexistence.org/index.php"><span></span>Edge of Existence*</a>
            – a programme run by <a href="http://www.zsl.org/" target="_blank"
                                    class="offsite offsite-dark line-link dark-line"><span></span>Zoological Society of
                London</a>, deals directly with evolutionarily distinct animals, and has a great list of <a
                    target="_blank" class="offsite offsite-dark line-link dark-line"
                    href="http://www.edgeofexistence.org/mammals/top_100.php"><span></span>100 mammals</a> and other
            types of species which you can look through if your interests have been perked. *This project is not
            associated with Edge of Existence.
        </p>
        <p>Of the animals featured here, a number have great causes dealing specifically with their battles, or
            otherwise aid in respect to the species' family.</p>
        <ul>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://rangkong.org"><span></span>Indonesia Hornbill Conservation Species</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://inaturefilms.org/"><span></span>Indonesia Nature Film Society</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://wwf.panda.org/"><span></span>WWF &amp; Habitat Conservation</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://vaquita.tv"><span></span>Vaquita – Last Change for the Desert Porpoise</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.savetheliontamarin.org/"><span></span>Save the Golden Lion Tamarin</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="https://www.rainforesttrust.org/projects/complete-projects/preventing-extinction-golden-poison-frog/"><span></span>Rainforest
                Trust</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.edgeofexistence.org/birds/species_info.php?id=1934"><span></span>Edge of Existence -
                Forest Owlet</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.conserveturtles.org/seaturtleinformation.php?page=kemps-ridley"><span></span>Sea
                Turtle Conservancy</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.saharaconservation.org/?Scimitar-horned-Oryx-Chad"><span></span>Sahara Conservation
                Fund</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://taronga.org.au/animals-conservation/breeding-programs/global-breeding-programs/fijian-crested-iguana-breeding"><span></span>Fijian
                Crested Iguana Breeding Program</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://seahorse.fisheries.ubc.ca/species/capensis"><span></span>Project Seahorse</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.acaatinga.org.br/english/index.php/2014/i-help-to-save-the-three-banded-armadillo/"><span></span>Caatinga
                Association - Brazilian 3-Banded Armadillo</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.zsl.org/conservation/regions/americas/pygmy-three-toed-sloth-conservation"><span></span>ZSL
                Initiative for Pygmy 3-Toed Sloth</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://kakaporecovery.org.nz/"><span></span>Kakapo Recovery </a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.edgeofexistence.org/mammals/species_info.php?id=1395"><span></span>Long-beaked
                Echidna</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.iucnredlist.org/details/60274/0"><span></span>Edge of Existence – Long-beaked
                Echidna</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.sanccob.co.za/"><span></span>SANCCOB initiative for Penguins</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://sunbears.wildlifedirect.org/"><span></span>Bornean Sun Bear Conservation Centre</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://blog.nature.org/science/2014/07/31/parrotfish-caribbean-coral-reef-iucn-report/"><span></span>Nature
                Conservancy - Parrotfish</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.sospecies.org/sos_projects/pilot_projects/edge_of_existence/wild_camel/"><span></span>SOS
                Wild Camel</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.sawai-ecotourism.com/rainforest-conservation/"><span></span>Sawai Ecotourism –
                Wallace's Golden Birdwing</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.awf.org/"><span></span>African Wildlife Foundation – Somali Ostrich</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://redpandanetwork.org/"><span></span>Red Panda Network</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.malaytapir.org/"><span></span>Malay Tapir Project</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.sadabe.org/whatis.html"><span></span>Sadabe – Diademed Sifaka</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://soslynx.org/"><span></span>SOS Lynx</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.rhinos.org/rhinos/sumatran-rhino"><span></span>International Rhino Foundation</a>
            </li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.worldlandtrust.org/education/species/chacoan-peccary"><span></span>World Land Trust
                – Chocoan Peccary</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.okapiconservation.org"><span></span>Okapi Project</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.conservationleadershipprogramme.org/project/javan-slow-loris-project-indonesia/"><span></span>Javan
                Slow Loris Project</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.hirolaconservation.org/"><span></span>Hirola Program</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="https://www.facebook.com/pages/The-Drill-Project/258035237544233"><span></span>Drill
                Project</a></li>
        </ul>
        <h2>Sources</h2>
        <p>I have used an extensive range of sources to gather the information within this site, specifically the
            statistical data which is fairly tough to find. I thank each source sincerely, and wish to highlight their
            great resources here:</p>
        <ul>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.fws.gov/pacific/ecoservices/documents/Alala_Revised_Recovery_Plan.pdf"><span></span>Alala
                Recovery Plan</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://http://www.wikipedia.org/"><span></span>Wikipedia</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.iucnredlist.org/"><span></span>IUCN Red List – Conservation Status Assessors</a>
            </li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.animalinfo.org/"><span></span>Animal Info – Extensive statistics </a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.arkive.org/"><span></span>Wildscreen Arkive</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://zoo.sandiegozoo.org/"><span></span>San Diego Zoo</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="https://books.google.co.uk/books?id=8IkvLQtkpwYC&amp;pg=PA22&amp;dq=chacoan+peccary+population&amp;hl=en&amp;sa=X&amp;ei=buTsVKvXPMndPZLmgNAH&amp;ved=0CCAQ6AEwAA#v=onepage&amp;q=chacoan%20peccary%20population&amp;f=false"><span></span>Book:
                Status Survey and Conservation </a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://shawmst.org/biology/activity/saving-the-golden-lion-tamarin/"><span></span>Shaw High
                School</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://www.nps.gov/pais/learn/nature/kridley.htm"><span></span>National Park Service</a></li>
            <li><a class="line-link dark-line offsite offsite-dark" target="_blank"
                   href="http://pygmy3sloth.weebly.com/endangerment.html"><span></span>Pygmy3Sloth</a></li>
        </ul>
    </div>
    <div class="download">
        <h2>下载壁纸</h2>
        <img src="assets/img/assets/wallpapers/1366x768_vaquita.png" alt="Wallpaper Image">
        <ul>
            <li>
                <a target="_blank" class="line-link dark-line" href="#" download="">Macbook
                    <span>(Retina 2560x1600)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line" href="#" download="">Large Desktop
                    <span>(1920x1080)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line" href="#" download="">Small Desktop
                    <span>(1366x768)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line" href="#" download="">iPad <span>(1024x1024)</span></a>
            </li>
        </ul>
    </div>
    <div class="shring-goodies">
        <h2>分享</h2>
        <p>如果你很欣赏这个项目，请告诉你的朋友！</p>
        <h2>Poster</h2>
        <p>
            Take the pieces home with this poster, available <a class="offsite offsite-dark line-link dark-line"
                                                                target="_blank"
                                                                href="http://society6.com/product/in-pieces--species-collection_print#1=2"><span></span>here</a>
            for €30. All personal proceeds<span class="disclaimer">*</span> will go to <a target="_blank"
                                                                                          class="offsite offsite-dark line-link dark-line"
                                                                                          href="http://www.edgeofexistence.org/support/donation_form.php?donationType=single"><span></span>Evolutionarily
            Distinct &amp; Globally</a>, an initiative which deals with the kind of species showcased within In
            Pieces.
        </p>
        <a target="_blank" href="http://society6.com/product/in-pieces--species-collection_print#1=2"><img
                src="assets/img/assets/poster-small.jpg" alt="Poster"></a>
        <a target="_blank" href="http://society6.com/product/in-pieces--species-collection_print#1=2"><img
                src="assets/img/assets/poster-detail-1.jpg" alt="Poster"><img
                src="assets/img/assets/poster-detail-2.png" alt="Poster"></a>
        <h2>Wallpapers</h2>
        <p>
            You can download a range of wallpapers of specific species for your desktop within the exhibition, but here
            you can have them all in one place too. Select which device takes your fancy below.
        </p>
        <img src="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" alt="Wallpaper image all animals">
        <p>
        </p>
        <ul>
            <li>
                <a target="_blank" class="line-link dark-line"
                   href="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" download="">Macbook
                    <span>(Retina 2560x1600)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line"
                   href="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" download="">Large Desktop
                    <span>(1920x1080)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line"
                   href="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" download="">Small Desktop
                    <span>(1366x768)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line"
                   href="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" download="">iPad
                    <span>(1024x1024)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line"
                   href="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" download="">Mobile – Frog
                    <span>(750x1334)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line"
                   href="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" download="">Mobile –
                    Scimitar Oryx <span>(750x1334)</span></a>
            </li>
            <li>
                <a target="_blank" class="line-link dark-line"
                   href="assets/img/assets/wallpapers/all-animals/all-animals_1366x768.png" download="">Mobile –
                    Wallace’s Golden Birdwing <span>(750x1334)</span></a>
            </li>
        </ul>
        <p></p>
        <p>
            <span class="disclaimer">*</span><span>
                            Personal income on poster sale is a percentage of the poster cost. Around 20% of the respective per poster is taken personally and sent on to EDGE.
                        </span>
        </p>
    </div>
</div>
<div class="loading-progress"></div>
<audio src="assets/audio/ambient-loop-piano.mp3" autoplay="autoplay" loop="loop" id="audio"></audio>
<script src="./assets/jquery-3.1.1.min.js"></script>
<script src="./assets/main.js"></script>
</body>
</html>